<template>
  <div>
    <p class="title">商品备注</p>

    <div class="remark-content mb10">
      <Editor v-model="textarea" :isLimit="true" :isEdit="isEdit" @onBlur="onBlur" />
    </div>

    <!-- <el-input v-model="textarea" :rows="4" type="textarea" placeholder="请输入" class="mb10" /> -->

    <!-- 上传图片 -->
    <!-- <el-upload
      class="upload-demo upload-card"
      v-model:file-list="imgFileList"
      ref="uploadImg"
      :show-file-list="true"
      multiple
      list-type="picture-card"
      :auto-upload="false"
      :on-change="
        (file, fileList) => {
          handleAvatarChangeIcon(file, fileList);
        }
      "
    >
      <div style="display: flex; flex-direction: column; align-items: center; color: #86909c">
        <el-icon class="f24"><Plus /></el-icon>
        <p class="f12" style="line-height: 22px; color: #86909c">图片/视频</p>
      </div>

      <template #file="{ file }">
        <div style="width: 100%" class="list-wrap">
          <video
            controls
            style="width: 100%; height: 100%"
            v-if="file.img && (file.img.includes('.mp4') || file.img.includes('.MP4'))"
          >
            <source :src="file.img" type="video/mp4" />
            对不起，您的浏览器不支持播放视频文件
          </video>
          <img
            v-if="file.img && !(file.img.includes('.mp4') || file.img.includes('.MP4'))"
            class="el-upload-list__item-thumbnail"
            :src="file.img"
            alt=""
          />

          <span
            v-show="!file.img"
            class="f30"
            style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%"
          >
            <el-icon><Loading /></el-icon>
          </span>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
              <el-icon><Delete /></el-icon>
            </span>
          </span>
        </div>
      </template>
    </el-upload> -->
  </div>
</template>

<script setup>
import { reactive, onMounted, watch, ref } from "vue";
import Editor from "@/components/Editor";
import { useRoute } from "vue-router";
const route = useRoute();

const emit = defineEmits(["update:modelValue", "onBlur"]);
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  }
});
const textarea = ref(props.modelValue);
const isEdit = ref(true);
setTimeout(() => {
  isEdit.value = route.query?.review === "true" ? false : true;
}, 500);
watch(
  () => props.modelValue,
  val => {
    textarea.value = JSON.parse(JSON.stringify(val));
  },
  { deep: true, immediate: true }
);

watch(
  () => textarea.value,
  val => {
    emit("update:modelValue", val);
  },
  { deep: true, immediate: true }
);

const onBlur = html => {
  emit("onBlur", html);
};

//====================================图片上传========================================================================================
// import { ElMessage } from "element-plus";
// import useMultipartOssStore from "@/store/modules/multipartOssStore.js";
// const ossStore = useMultipartOssStore();
// import {
//   getFolder,
//   _throttle, //节流，多次频繁触发时，只执行第一次
//   _debounce //防抖，多次频繁触发时，只执行最后一次
// } from "@/utils/index";

// const uploadImg = ref();
// const FileList = ref([]);
// // const imgIsReady = ref(false);
// const handleAvatarChangeIcon = _debounce(async (file, fileList, type = "img-video") => {
//   //选中文件触发的change事件
//   console.log("触发文件上传==", fileList);
//   const _fileList = fileList.filter(item => item.status === "ready"); //未上传成功的图片
//   //   imgIsReady.value = false;

//   const flag = fileType(type, _fileList, type);

//   if (!flag) {
//     const errorFile = [];
//     const successFile = [];
//     if (type === "img-video") {
//       ElMessage({
//         message: "只能上传图片或者mp4视频",
//         type: "error",
//         offset: 60
//       });

//       for (let item of _fileList) {
//         if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png" || item.raw.type === "video/mp4")) {
//           errorFile.push(item);
//         } else {
//           successFile.push(item);
//         }
//       }
//       for (let item of errorFile) {
//         uploadImg.value.handleRemove(item);
//       }
//     }
//     if (successFile.length <= 0) return;
//   }
//   if (type === "img") {
//     FileList.value = fileList;
//   }
//   for (let item of _fileList) {
//     await customUpload(item, { file: item }, type);
//   }
//   console.log("文件全部上传成功");
// }, 100);

// /**
//  * 校验文件类型
//  */
// const fileType = (type, fileList) => {
//   let flag = true;
//   if (type === "img") {
//     for (let item of fileList) {
//       if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png")) {
//         flag = false;
//       }
//     }
//   } else if (type === "video") {
//     for (let item of fileList) {
//       if (!(item.raw.type === "video/mp4")) {
//         flag = false;
//       }
//     }
//   } else if (type === "img-video") {
//     for (let item of fileList) {
//       if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png" || item.raw.type === "video/mp4")) {
//         flag = false;
//       }
//     }
//   }
//   return flag;
// };
// /**
//  * 上传
//  */
// const customUpload = async (item, option, type) => {
//   // 合并已上传和当前上传文件
//   const folder = getFolder();
//   const objName = folder + option.file.name;
//   await ossStore
//     .submit(objName, option.file.raw)
//     .then(async res => {
//       await ossStore.setACL(objName, fileReadRole.publicRead);
//       res.fileUrl = await ossStore.signatureUrl(objName);
//       console.log("文件上传成功，地址为===", res.fileUrl.split("?")[0]);
//       // if (type === "img-video") {
//       item["img"] = res.fileUrl.split("?")[0];
//       // }
//       item["folder"] = objName;

//       const Option = JSON.parse(JSON.stringify(option));
//       uploadIMG(Option); //图片上传到业务端
//     })
//     .catch(err => {
//       alert(JSON.stringify(err));
//     });
// };
// const handleRemove = file => {
//   console.log("移除===", file);
//   uploadImg.value.handleRemove(file);
// };

// //将图片上传到业务端服务
// const uploadIMG = option => {
//   const nameArr = option.file.name.split(".");
//   const uploadArr = [
//     {
//       fileId: option.file.uid,
//       objectName: option.file.folder, //目录＋文件名称
//       url: option.file.img || option.file.video,
//       access: "public-read",
//       fileName: option.file.name, //文件名称
//       bucketName: "51-jzt-dev",
//       size: option.file.size,
//       type: true,
//       suffix: nameArr[nameArr.length - 1]
//     }
//   ];
//   imgsUpload(uploadArr).then(res => {
//     console.log(909090, res);
//   });
// };
// const fileReadRole = {
//   defaultRole: "",
//   privateRole: "private",
//   publicRead: "public-read",
//   publicReadWrite: "public-read-write"
// };
</script>

<style lang="scss" scoped>
:deep(.upload-card .el-upload-list__item.is-ready) {
  width: 130px !important;
}

:deep(.upload-card) {
  .el-upload-list__item.is-ready,
  .el-upload-list__item.is-success {
    width: 130px !important;
  }
}
:deep(.el-upload-list--picture-card .el-upload-list__item-thumbnail) {
  object-fit: cover !important;
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  margin-right: 10px !important;
}
.title {
  color: #86909c;
  font-size: 18px;
  margin-bottom: 10px;
}
.remark-content {
  :deep(.w-e-scroll) {
    background-color: white !important;
    border: 1px solid #e4e7ed;
    border-top: none;
    border-radius: 0 0 4px 4px;
  }
  :deep(.editor-com) {
    & > div {
      border: none !important;
      & > div:first-of-type {
        border: 1px solid #e4e7ed;
        border-bottom: none !important;
        background-color: #e5ebf1;
        border-radius: 4px 4px 0 0;
        .w-e-bar {
          background: transparent;
          height: 44px;
          display: flex;
          align-items: center;
        }
        .w-e-bar-item button:hover {
          background-color: #e5ebf1;
        }
      }
    }
  }
}
</style>
